


<div region="west" onResize="alert('hi);" split="true" title="Select a Category" style="width:180px;max-width:395px;">
    <p style="padding:5px;margin:0;">Select language:</p>
    <ul>
        <li><a href="javascript:void(0)" onclick="showcontent('java')">Java</a></li>
        <li><a href="javascript:void(0)" onclick="showcontent('cshape')">C#</a></li>
        <li><a href="javascript:void(0)" onclick="showcontent('vb')">VB</a></li>
        <li><a href="javascript:void(0)" onclick="showcontent('erlang')">Erlang</a></li>
    </ul>
</div>
<div id="maincontent" region="center" title="Problem" style="padding:5px;height:100%;width:100%">

    <div id="ep" style="width:100%;height:100%;">  
        <div class="easyui-panel" id="tt">

            <div title="Welcome" style="padding:20px;background-color: darkseagreen">
                <h1>Welcome</h1>
            </div>
        </div>
    </div> 
</div>

<script src="<?php echo base_url() ?>javascripts/jquery/jquery.watch.js"></script>
<link rel="stylesheet" href="<?php echo base_url() ?>stylesheets/lib/codemirror.css">
<script src="<?php echo base_url() ?>javascripts/lib/codemirror.js"></script>
<script src="<?php echo base_url() ?>javascripts/mode/javascript/javascript.js"></script>
<link rel="stylesheet" href="<?php echo base_url() ?>stylesheets/theme/neat.css"/>
<script src="<?php echo base_url() ?>stylesheets/mode/css/css.js"></script>
<!--link rel="stylesheet" href="<?php echo base_url() ?>stylesheets/css/docs.css"/-->
<style type="text/css">
    .CodeMirror {
        border: 1px solid #eee;
    }
    .CodeMirror-scroll {
        height: 100%;
        width: 100%;
        overflow-y: auto;
        overflow-x: scroll;
    }

    .CodeMirror-lines pre1{
        overflow: hidden;
    }

    .layout-split-west {
        max-width: 395px;
    }
    .layout-panel-west{
        max-width: 395px;
    }
    .tabs li{
        margin-right: -20px;
    }
</style>
<script>
    
    
    $(function(){
        /*$(".layout-button-left").click(function(){
            alert('hi');
        });*/
        /*$("#maincontent").change(function(){
            $('#e.panel-header').css('width',parseInt($('#maincontent').css('width'))-40);
            alert('hi');
        });
    
        $(".panel-header").resize(function(){
            alert('hi');
        });*/
        
        $(".layout-split-west").watch('width,left,height', function(){
            //alert('hey..');
            //$('.easyui-panel').css('width',$('.layout-panel-center').css('width'));
            //$('.tabs-header').css('width',$('.layout-panel-center').css('width'));
            $('.tabs-wrap').css('width','auto !important');
            $('.easyui-panel').css('height',parseInt($('.layout-panel-center').css('height')));
            $('.tabs-panels').css('height',parseInt($('.layout-panel-center').css('height')));
            $('.CodeMirror').css('height',parseInt($('.layout-panel-center').css('height'))-66);
            //$('.CodeMirror').css('width',parseInt($('.layout-panel-center').css('width')));
            $('.tabs-panels .panel-body').css('height',parseInt($('.layout-panel-center').css('height')));
            $('.tabs-panels .panel-body').css('width',parseInt($('.layout-panel-center').css('width'))-16);
            $('.tabs-panels .panel').css('height',parseInt($('.layout-panel-center').css('height')));
            $('.tabs-panels .panel').css('width',parseInt($('.layout-panel-center').css('width'))-16);
            $('#tt').css('height',parseInt($('.layout-panel-center').css('height'))-35);
            $('.CodeMirror-gutter').css('height',parseInt($('.layout-panel-center').css('height'))-83);
        });
        
        $("#maincontent").watch('width,left,height', function(){
            //alert('hey...');
            $('.CodeMirror').css('height',parseInt($('.layout-panel-center').css('height'))-66);
            //$('.CodeMirror').css('width',parseInt($('.layout-panel-center').css('width')));
            $('.tabs-panels .panel-body').css('height',parseInt($('.layout-panel-center').css('height')));
            $('.tabs-panels .panel-body').css('width',parseInt($('.layout-panel-center').css('width'))-16);
            $('.tabs-panels .panel').css('height',parseInt($('.layout-panel-center').css('height')));
            $('.tabs-panels .panel').css('width',parseInt($('.layout-panel-center').css('width'))-16);
            $('#tt').css('height',parseInt($('.layout-panel-center').css('height'))-35);
            $('.CodeMirror-gutter').css('height',parseInt($('.layout-panel-center').css('height'))-83);
        });
        
        
        /*$(".panel").watch('width', function(){
            $('.tabs-wrap').css('width','auto !important');
            $('.easyui-panel').css('height',parseInt($('.layout-panel-center').css('height'))-(.005*parseInt($('.layout-panel-center').css('height'))));
            $('.tabs-panels').css('height',parseInt($('.layout-panel-center').css('height'))-(.005*parseInt($('.layout-panel-center').css('height'))));
            //$('.CodeMirror').css('height',parseInt($('.layout-panel-center').css('height'))-(.005*parseInt($('.layout-panel-center').css('height'))));
            
        });*/
        
    });
    
    $("#maincontent").ready(function () {
        $('#p').panel({  
            width:$('#maincontent').css('width'),  
            height:"100%",  
            title: 'Problem Statement',  
            collapsible:true
        });   
        $('#e').panel({  
            width:$('#maincontent').css('width'),  
            height:"100%",  
            title: 'Code Panel',  
            collapsible:false
        });   
        
        
        
    });
    
    $("#p").ready(function () {
        $('#p.panel-header').css('width','99%');
        $('#p.panel-body').css('width',parseInt($('#maincontent').css('width'))-40);
        //alert(parseInt($('#maincontent').css('width'))-40);
        
    });
    
    $("#e").ready(function () {
        $('#e.panel-header').css('width','99% !important');
        $('#e.panel-body').css('width','98.2%');
        var h=$('#maincontent').css('height');
        h=h;
        $('#e.panel-body').css('height',h);
    });
    
    
    $("#ep").ready(function(){
        //$('.easyui-panel').css('width',$('.layout-panel-center').css('width'));
        $('.easyui-panel').css('width','auto');
        $('.easyui-panel').css('height',parseInt($('#maincontent').css('height'))-(.005*parseInt($('#maincontent').css('height'))));
        $('.tabs-panels').css('height',parseInt($('#maincontent').css('height'))-(.005*parseInt($('#maincontent').css('height'))));
    });
    
    $(".tabs-wrap").ready(function(){
        $('.tabs-wrap').css('width','auto !important');
    });
    
    
    
    $(function(){
        $('#tt').tabs({
            tools:[{
                    iconCls:'icon-add',
                    handler: function(){
                        alert('add');
                    }
                },{
                    iconCls:'icon-save',
                    handler: function(){
                        alert('save');
                    }
                }]
        });
    });
        
    var index = 0;
    function addTab($tabname){
        index++;
        if ($('#tt').tabs('exists', $tabname)){  
            $('#tt').tabs('select', $tabname);  
        } else { 
            var codeid="code"+index;
            var content='<textarea id="'+codeid+'" name="'+codeid+'" rows="5"></textarea>';
            $('#tt').tabs('add',{
                title:$tabname,
                content:content,
                iconCls:'icon-edit',
                closable:true,
                fit:true,
                width:"100%",
                height:"100%"
            });
            
            CodeMirror.fromTextArea(document.getElementById(codeid), {
                lineNumbers: true,
                theme: "neat",
                height: "100%",
                width: "100%",
                mode: "javascript"
                
            });
         
         
            $('.tabs-wrap').css('width','auto !important');
            $('.easyui-panel').css('height',parseInt($('.layout-panel-center').css('height')));
            $('.tabs-panels').css('height',parseInt($('.layout-panel-center').css('height')));
            $('.CodeMirror').css('height',parseInt($('.layout-panel-center').css('height'))-66);
            //$('.CodeMirror').css('width',parseInt($('.layout-panel-center').css('width'))-50);
            $('.tabs-panels .panel-body').css('height',parseInt($('.layout-panel-center').css('height')));
            $('.tabs-panels .panel-body').css('width',parseInt($('.layout-panel-center').css('width'))-16);
            $('.tabs-panels .panel').css('height',parseInt($('.layout-panel-center').css('height')));
            $('.tabs-panels .panel').css('width',parseInt($('.layout-panel-center').css('width'))-16);
            $('#tt').css('height',parseInt($('.layout-panel-center').css('height'))-35);
            $('.CodeMirror-gutter').css('height',parseInt($('.layout-panel-center').css('height'))-83);
            //$('.CodeMirror').css('width',parseInt($('.layout-panel-center').css('width')));
        }
    }
    function showcontent($tabname){
        addTab($tabname);
    }
    
</script>